<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card>
    <div>
      <el-input v-model="searchVal.query" placeholder="请输入内容" size="large">
        <template #append>
          <el-button size="large" :icon="Search" @click="getGoodsList" />
        </template>
      </el-input>
      <el-button style="margin-left: 20px;" type="primary" size="large" @click="addGoods">添加商品</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table stripe size="large" :data="goods" border style="width: 100%">
      <el-table-column label="#" type="index" width="50" />
      <el-table-column prop="goods_name" label="商品名称" width="700" />
      <el-table-column prop="goods_price" label="商品价格" />
      <el-table-column prop="goods_weight" label="商品重量" />
      <el-table-column prop="add_time" label="创建时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" :icon="Edit" @click="editGoods(scope.row.goods_id)" />
          <el-button type="danger" :icon="Delete" @click="delGoods(scope.row.goods_id)" />
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination v-model:current-page="searchVal.pagenum" v-model:page-size="searchVal.pagesize"
        :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="getGoodsList" @current-change="getGoodsList" />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, getCurrentInstance } from 'vue';
import { getGoodsApi, delGoodsApi } from '@/api/goodsInfa';
import { Search, Edit, Delete } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const { proxy } = getCurrentInstance() as any

const router = useRouter()
onMounted(() => {
  getGoodsList()
})

const searchVal = reactive({
  query: undefined,
  pagenum: 1,
  pagesize: 10
})
const total = ref(0)
const goods = ref()
const getGoodsList = () => {
  getGoodsApi(searchVal).then(res => {
    goods.value = res.data.goods
    total.value = res.data.total
  })
}
// 添加商品
const addGoods = () => {
  router.push('/add')
}
// 编辑商品
const editGoods = (id: any) => {
  router.push({
    path: '/add',
    query: {
      id: id
    }
  })
}
// 删除商品
const delGoods = (id: any) => {
  proxy.$messageBox.confirm(
    '确定删除此商品？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      delGoodsApi(id).then(res => {
        if (res.meta.status === 200) {
          getGoodsList()
          proxy.$message.success('删除成功')
        }
      })
    })
}
</script>

<style scoped lang="scss">
.el-card {
  margin-top: 20px;
}

.el-table {
  margin-top: 20px;
}

.el-input {
  width: 500px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>